<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button class="filter-item" size="small" type="primary" v-waves icon="el-icon-plus" @click="handleUpdate(null)">添加</el-button>

      <el-input @keyup.enter.native="handleFilter" size="small" style="width: 200px;" class="filter-item" placeholder="商品编码" v-model="filters['eq$goods.goods_no']"></el-input>
      <el-input @keyup.enter.native="handleFilter" size="small" style="width: 200px;" class="filter-item" placeholder="商品名称" v-model="filters['like$goods.title']"></el-input>

      <el-select size="small" v-model="filters['goods.status']" clearable placeholder="商品状态">
        <el-option v-for="(item,index) in goodsStatusData()" :key="index" :label="item" :value="index">
        </el-option>
      </el-select>

      <br>
      <br>
      <category-cascader :clearable="true" v-model="filters['startWith$goods_category.path']"></category-cascader>
      <el-select v-model="params['payment_type']" clearable placeholder="支付方式" size="small" >
          <el-option v-for="(item,index) in paymentTypes" :key="index" :label="item" :value="index">
          </el-option>
      </el-select>

      <el-select v-model="filters['goods.auditStep']" clearable placeholder="审核状态" size="small" >
          <el-option v-for="(item,index) in auditStatus" :key="index" :label="item" :value="index">
          </el-option>
      </el-select>

      <el-button class="filter-item" type="primary" size="small" v-waves icon="el-icon-search" @click="handleFilter">搜索</el-button>
      <el-button class="filter-item" type="primary" size="small" v-waves icon="el-icon-document" @click="exportExcelFile">导出</el-button>
    </div>
    <el-table size="smamedium" :data="list" :height="tableHeight" :fit="true" @sort-change="sortChange" v-loading="listLoading" element-loading-text="给我一点时间"
      border highlight-current-row style="width: 100%">
      <el-table-column align="center" label="操作" width="260" fixed="left">
        <template slot-scope="scope">
          <div class="btns">
            <el-button type="primary" v-if="isAdmin()" size="mini" @click="handleUpdate(scope.row)">修改</el-button>
            <!-- <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button> -->
            <template v-if="isAdmin()">
              <el-button size="mini" v-if="scope.row.auditStep!=2" type="default" @click="handleCommand(scope.row,'authPassed')">审核通过</el-button>
              <el-button size="mini" v-if="scope.row.auditStep!=9" type="success" @click="handleCommand(scope.row,'unAuthPassed')">审核拒绝</el-button>
            </template>
            <el-button size="mini" type="default" @click="changeStock(scope.row)">修改库存</el-button>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" type="index" label="ID" width="80" fixed="left">
          <template slot-scope="scope">
          <span>{{scope.row.id}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="cover" align="center" label="封面" width="200" fixed="left">
        <template slot-scope="scope">
          <img :src="scope.row.cover|absUrl" alt="" class="avatar">
        </template>
      </el-table-column>

      <el-table-column prop="title" align="center" label="商品名称" width="160" fixed="left">
        <template slot-scope="scope">
          <el-tag size="mini" type="danger" v-if="scope.row.tjTag">{{scope.row.tjTag}}</el-tag>
          <div>{{scope.row.title}}</div>
        </template>
      </el-table-column>

      <el-table-column prop="goodsNo" align="center" label="商品编码">
        <template slot-scope="scope">
          <span>{{scope.row.goodsNo}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="title" align="center" label="条形码" width="160" >
        <template slot-scope="scope">
          <span>{{scope.row.barCode}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="providerName" align="center" label="供应商">
        <template slot-scope="scope">
          <span>{{scope.row.providerName||'中油BP'}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="goodsCategoryName" align="center" label="类别名称">
        <template slot-scope="scope">
          <span>{{scope.row.goodsCategoryName}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="marketPrice" align="center" label="市场价(元)">
        <template slot-scope="scope">
          <span>{{scope.row.marketPrice}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="price" align="center" label="微信价(元)">
        <template slot-scope="scope">
          <span>{{scope.row.price}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="points" align="center" label="积分数(个)">
        <template slot-scope="scope">
          <span>{{scope.row.points}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="brandId" align="center" label="品牌">
        <template slot-scope="scope">
          <span>{{scope.row.brandName}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="status" align="center" label="商品状态">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status|tagStatus">{{scope.row.status|goodsStatus}}</el-tag>
        </template>
      </el-table-column>

      <el-table-column prop="status" align="center" label="审核状态" width="120">
        <template slot-scope="scope">
          <el-tag :type="scope.row.auditStep|tagStatus">{{scope.row.auditStep|authStatusFilter}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="status" align="center" label="审核理由" width="120">
        <template slot-scope="scope">
          {{scope.row.approveRemark}}
        </template>
      </el-table-column>

      <el-table-column prop="stock" align="center" label="库存" sortable>
        <template slot-scope="scope">
          <span>{{scope.row.stock}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="stock" align="center" label="排序" sortable v-if="isAdmin()">
        <template slot-scope="scope">
          <span>{{scope.row.sort}}</span>
        </template>
      </el-table-column>

    </el-table>
    <div class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="params.page"
        :page-sizes="[10,20,30,50]" :page-size="params.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>

    <el-dialog title="修改库存" :visible.sync="stockDialogVisible" width="600px">
      <el-form class="dialog-form" ref="stockDialogRulesForm" :rules="stockDialogRules" :model="stockDialogData" label-position="left"
        label-width="120px">
        <el-form-item label="库存数量" prop="stock">
          <el-input-number v-model="stockDialogData.stock" placeholder="库存数量"></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="stockDialogVisible = false">取消</el-button>
        <el-button type="primary" :loading="submiting" @click="submitChangeStockAction">确定</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="isEditing?'修改':'添加'" :visible.sync="dialogFormVisible" width="1400px">
      <el-form class="dialog-form" :rules="rules" ref="dataForm" :model="temp" label-position="left" label-width="120px">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="所属分类" prop="categoryPath">
              <category-cascader placeholder="所属分类" v-model="temp.categoryPath"></category-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="所属品牌" prop="brandId">
              <xd-select filterable v-model="temp.brandId" url="goods_brand"></xd-select>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="8">
            <el-form-item label="所属小类" prop="typeCode">
              <el-select v-model="temp.typeCode" filterable placeholder="请选择" @change="changeTypeCode">
                <el-option v-for="item in typeCodeData" :key="item.typeCode" :label="item.title" :value="item.typeCode">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col> -->
        </el-row>

        <!-- <el-form-item :label-width="1" prop="goodsRule">

        </el-form-item> -->

        <div style="padding-bottom:30px;">
          <goosds-rule ref="goodsRule" :goodsRuleValues="temp.skuList" @hasNewGoodRules="hasNewGoodRules=true" @hasNoNewGoodRules="hasNewGoodRules=false"></goosds-rule>
        </div>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="销售状态" prop="status">
              <el-radio-group v-model="temp.status">
                <el-radio :label="index" v-for="(item,index) in goodsStatusData()" :key="index">{{item}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>

        </el-row>
        <el-row :gutter="20" v-if="isAdmin()">
          <!-- <el-col :span="12">
            <el-form-item label="是否置顶" prop="isHot" >
              <el-radio-group v-model="temp.isHot">
                <el-radio :label="index" v-for="(item,index) in yesOrNoData" :key="index">{{item}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col> -->
          <el-col :span="12" v-if="isAdmin()">
            <el-form-item label="排序" prop="sort">
              <el-input-number v-model="temp.sort" placeholder="排序"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="税率" prop="taxrate">
              <el-input-number v-model="temp.taxrate" placeholder="税率"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="商品详情" prop="content">
          <div class="quill-wrap" style="height:500px;">
            <quill-editor style="height:400px;" v-model="temp.content" ref="myQuillEditor" :options="editorOption">
            </quill-editor>
          </div>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" :loading="submiting" @click="submitFormAction">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import categoryCascaderVue from '../../components/categoryCascader.vue'

import { paymentTypes, auditStatus, yesOrNoData } from '../../config/constants'

import { quillEditor, Quill } from 'vue-quill-editor'
import { container, ImageExtend, QuillWatch } from 'quill-image-extend-module'
import xdUploadVue from '../../components/xdUpload.vue'
import goodsRuleVue from '../../components/goodsRule.vue'

Quill.register('modules/ImageExtend', ImageExtend)
export default {
  components: {
    'category-cascader': categoryCascaderVue,
    quillEditor,
    'goosds-rule': goodsRuleVue,
    'xd-upload': xdUploadVue
  },
  data () {
    return {
      auditStatus: auditStatus,
      tableHeight: 500,
      yesOrNoData,
      // typeCodeData:[],
      total: 0,
      hasNewGoodRules: false,
      uillUpdateImg: false,
      paymentTypes: paymentTypes,
      isAddingRule: false,
      total: 0,
      stockDialogVisible: false,
      stockDialogData: {
        stock: 0,
        id: 0
      },
      stockDialogRules: {
        stock: [
          {
            required: true,
            message: '商品库存不能为空',
            trigger: 'change'
          }
        ]
      },
      goodsTagItems: [],
      editorOption: {
        placeholder: '在这里输入内容!',
        modules: {
          ImageExtend: {
            loading: true,
            name: 'file',
            action: '/util/upload',
            response: res => {
              return (
                'http://weixin-ostorage01.oss-cn-shenzhen.aliyuncs.com' +
                res.info
              )
            }
          },
          toolbar: {
            container: container,
            handlers: {
              image: function () {
                QuillWatch.emit(this.quill.id)
              }
            }
          }
        }
      },
      temp: {
        id: '',
        categoryId: '',
        categoryCode: '',
        taxrate: '',
        status: '',
        categoryPath: '',
        skuList: [],
        sort: 0,
        content: '',
        brandId: ''
      },
      ruleDialogVisible: false,
      rules: {
        cover: [
          {
            required: true,
            message: '封面不能为空',
            trigger: 'change'
          }
        ],

        taxrate: [
          {
            required: true,
            message: '税率不能为空',
            trigger: 'change'
          }
        ],
        sort: [
          {
            required: true,
            message: '排序不能为空',
            trigger: 'change'
          }
        ],
        categoryPath: [
          {
            required: true,
            message: '所属分类不能为空',
            trigger: 'change'
          }
        ],
        isHot: [
          {
            required: true,
            message: '是否置顶不能为空',
            trigger: 'change'
          }
        ],
        // typeCode: [
        //   {
        //     required: true,
        //     message: "请选择小类",
        //     trigger: "change"
        //   }
        // ],

        imgSrcs: [
          {
            required: true,
            message: '请上传至少一张商品图片',
            trigger: 'change'
          }
        ],

        title: [
          {
            required: true,
            message: '商品名称不能为空',
            trigger: 'change'
          },
          {
            max: 60,
            message: '商品名称不能大于60个字',
            trigger: 'change'
          }
        ],

        intro: [
          {
            required: true,
            message: '商品简介不能为空',
            trigger: 'change',
            max: 900
          }
        ],

        shopNo: [
          {
            required: true,
            message: '商家编码不能为空',
            trigger: 'change',
            max: 60
          }
        ],

        status: [
          {
            required: true,
            message: '销售状态未指定',
            trigger: 'change'
          }
        ],

        marketPrice: [
          {
            required: true,
            message: '市场价不能为空',
            trigger: 'change'
          }
        ],

        price: [
          {
            required: true,
            message: '微信价不能为空',
            trigger: 'change'
          }
        ],

        points: [
          {
            required: true,
            message: '积分价不能为空',
            trigger: 'change'
          }
        ],

        goodsNo: [
          {
            required: true,
            message: '货号不能为空',
            trigger: 'change',
            max: 60
          }
        ],

        stock: [
          {
            required: true,
            message: '商品库存不能为空',
            trigger: 'change'
          }
        ],

        alertStock: [
          {
            required: true,
            message: '警戒库存不能为空',
            trigger: 'change'
          }
        ],

        content: [
          {
            required: true,
            message: '商品详情不能为空',
            trigger: 'change'
          }
        ],

        brandId: [
          {
            required: true,
            message: '请选择品牌',
            trigger: 'change'
          }
        ]
      }
    }
  },

  created () {
    this.init('goods', 1).loadData()

    // this.combOptions("goods_tag").then(info => {
    //   this.goodsTagItems = info;
    // });
    this.tableHeight = window.innerHeight - 340
    // this.$get('/admin/goods_type/all_data').then(data=>{
    //   this.typeCodeData = data;
    // });
  },
  methods: {
    // changeTypeCode(param1){
    //   if(this.typeCodeData){
    //     let cc;
    //     (cc = this.typeCodeData.filter(e=>e.typeCode==param1)[0]) && (this.temp.typeName=cc.title);

    //   }
    // },
    changeStock (row) {
      this.stockDialogData = row
      // this.stockDialogData.stock = row.stock;
      this.stockDialogVisible = true
    },
    submitChangeStockAction () {
      this.$refs['stockDialogRulesForm'].validate(valid => {
        if (valid) {
          if (this.submiting) {
            return
          }
          this.submiting = true
          this.$post('/admin/goods/set_stock', {
            id: this.stockDialogData.id,
            stock: this.stockDialogData.stock
          })
            .then(_ => {
              this.submiting = false

              this.stockDialogVisible = false
              this.$$notify('操作成功')
            })
            .catch(_ => {
              this.submiting = false
            })
        }
      })
    },
    submitFormAction () {
      if (this.submiting) {
        return
      }
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          let skuList = this.$refs['goodsRule'].getData()
          skuList = this.parseArr2Params('skuList', skuList)
          this.submiting = true
          let data = {
            ...this.temp,
            ...skuList
          }
          let t = data.categoryPath.replace(/^,|,$/g, '').split(',')
          data.categoryId = t[t.length - 1]
          if (data.skuList) {
            delete data.skuList
          }
          let url = '/admin/goods/add_goods'
          if (this.temp.id > 0) {
            url = '/admin/goods/modify_goods'
            data.goodsId = data.id
            delete data.id
          }
          this.$post(url, data)
            .then(_ => {
              this.dialogFormVisible = false
              this.$$notify('操作成功')
              this.submiting = false
            })
            .catch(_ => {
              this.submiting = false
            })
        }
      })
    },
    __onParseFilterValue (field, eq, value) {
      if (value) {
        if (field == 'goods_category.path') {
          return ',' + value.replace(/^,|,$/g, '') + ','
        }
      }
      return value
    },
    handleCommand (row, command) {
      let postData = (value, isPassed) => {
        this.$post('/admin/goods/' + command, {
          id: row.id,
          approveRemark: value
        }).then(res => {
          if (isPassed) {
            row.auditStep = 2
          } else {
            row.auditStep = 9
          }
          this.$$notify('操作成功')
        })
      }
      if (command == 'unAuthPassed') {
        this.$prompt('请输入审核拒绝理由', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        })
          .then(({ value }) => {
            postData(value)
          })
          .catch(() => {})
      } else {
        this.$$comfirm('确定审核通过吗？', () => {
          postData('', 1)
        })
      }
    },

    exportExcelFile () {
      this.exportExcel({
        title: '商品',
        fields: [
          {
            field: 'goodsNo',
            title: '商品编码'
          },

          {
            field: 'title',
            title: '商品名称'
          },

          {
            field: 'categoryName',
            title: '所属分类'
          },
          {
            field: 'providerName',
            title: '供应商'
          },
          {
            field: 'brandName',
            title: '商品品牌'
          },

          {
            field: 'status',
            title: '商品状态',
            valueMap: this.goodsStatusData()
          },
          {
            field: 'marketPrice',
            title: '市场价'
          },
          {
            field: 'price',
            title: '微信价'
          },
          {
            field: 'points',
            title: '积分价'
          },
          {
            field: 'stock',
            title: '商品库存'
          },
          {
            field: 'alert_stock',
            title: '警戒库存'
          }
        ]
      }).then(info => {
        this.openWin(info)
      })
    }
  }
}
</script>
<style scoped>
.avatar {
  height: auto;
  display: block;
  margin: 0 auto;
  width: 100px;
}

.btns {
  padding-left: 15px;
}

.btns /deep/ button {
  margin-top: 10px;
  margin-bottom: 10px;
}
</style>
